<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
			<h2>Vue路由测试</h2>
		</div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <button class="list-group-item" @click="goToAbout">About</button>
      <button class="list-group-item" @click="goToHome">Home</button>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
	export default {
		name: "App",
		methods: {
			goToAbout(){
				//第一种解决编程式路由导航重复跳转报错的方式——指定成功和失败的回调
				this.$router.push({
					name:'guanyu'
				},()=>{},()=>{})

				//第二种解决编程式路由导航重复跳转报错的方式——使用catch捕获异常
				/* this.$router.push({
					name:'guanyu'
				}).catch(()=>{}) */
			},
			goToHome(){
				this.$router.push('/home')
			},
		},
	};
</script>
